import AutoChart from '@/components/Echarts/AutoChart';
import { medicinenewnumyield } from '@/services/api';
// @ts-ignore
import { BorderBox4 } from '@jiaminghi/data-view-react';
import React, { useEffect } from 'react';
import { useImmer } from 'use-immer';
import '../../Home.less';

const ColumnCharts: React.FC = () => {
  const [options, setOptions] = useImmer({
    legend: {
      data: ['出口数量', '总产量'],
      textStyle: {
        color: '#fff'
      } 
    },
    tooltip: {},
    xAxis: {
      data: [],
      splitLine: {
        show: false,
      },
    },
    grid: {
      top: '16%',
      left: '7%',
      right: '7%',
      bottom: '8%',
      containLabel: true,
    },
    yAxis: {},
    series: [
      {
        name: '出口数量',
        type: 'bar',
        data: [],
        emphasis: {
          focus: 'series',
        },
        itemStyle: {
          borderRadius: [40, 40, 0, 0],
        },
        backgroundStyle: {
          color: 'rgba(180, 180, 180, 0.2)',
        },
        animationDelay: function (idx) {
          return idx * 10;
        },
      },
      {
        name: '总产量',
        type: 'bar',
        data: [],
        emphasis: {
          focus: 'series',
        },
        color: '#7aabf5',
        itemStyle: {
          borderRadius: [40, 40, 0, 0],
        },
        backgroundStyle: {
          color: 'rgba(180, 180, 180, 0.2)',
        },
        animationDelay: function (idx) {
          return idx * 10 + 100;
        },
      },
    ],
    animationEasing: 'elasticOut',
    animationDelayUpdate: function (idx) {
      return idx * 5;
    },
  });

  useEffect(() => {
    medicinenewnumyield().then((res) => {
      setOptions((draft) => {
        draft.xAxis.data = res.data.map((i) => i.name);
        draft.series[0].data = res.data.map((i) => Number(i.value.split('-')[0]));
        draft.series[1].data = res.data.map((i) => Number(i.value.split('-')[1]));
      });
    });
  }, []);

  return (
    <div className="chart_box">
      <BorderBox4 color={['#396993', '#396993']}>
        <div className="chart_title">中药出口量</div>
        <div className="chart_chart padding-5">
          <AutoChart option={options as any}></AutoChart>
        </div>
      </BorderBox4>
    </div>
  );
};
export default ColumnCharts;
